<template>
  <div style="margin-top: 25px">
    <el-form
      :model="cmspage"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="所属站点" prop="siteId">
        <el-select clearable v-model="cmspage.siteId" placeholder="请选择站点">
          <el-option
            v-for="obj in siteIds"
            :key="obj.siteId"
            :label="obj.siteName"
            :value="obj.siteId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板" prop="templateId">
        <el-select
          clearable
          v-model="cmspage.templateId"
          placeholder="请选择模板"
        >
          <el-option
            v-for="obj in templateIds"
            :key="obj.templateId"
            :label="obj.templateName"
            :value="obj.templateId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="页面名称" prop="pageName">
        <el-input
          v-model="cmspage.pageName"
          placeholder="请输入页面名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="页面别名" prop="pageAliase">
        <el-input
          v-model="cmspage.pageAliase"
          placeholder="请输入页面别名"
        ></el-input>
      </el-form-item>
      <el-form-item label="访问路径" prop="pageWebPath">
        <el-input
          v-model="cmspage.pageWebPath"
          placeholder="请输入访问路径"
        ></el-input>
      </el-form-item>
      <el-form-item label="物理路径" prop="pagePhysicalPath">
        <el-input
          v-model="cmspage.pagePhysicalPath"
          placeholder="请输入物理路径"
        ></el-input>
      </el-form-item>
<el-form-item label="dataUrl" prop="dataUrl">
        <el-input
          v-model="cmspage.dataUrl"
          placeholder="请输入dataUrl"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="pageType">
        <el-radio-group v-model="cmspage.pageType">
          <el-radio label="静态" value="0"></el-radio>
          <el-radio label="动态" value="1"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间" prop="pageCreateTime">
        <el-date-picker
          v-model="cmspage.pageCreateTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { page_add } from "@/module/cmspage/api/cmspage";
export default {
  data() {
    return {
      templateIds: [
        { templateId: "5a962b52b00ffc514038faf7", templateName: "首页" },
        { templateId: "5a962c16b00ffc514038fafd", templateName: "分类导航" },
      ],
      siteIds: [{ siteId: "5a751fab6abb5044e0d19ea1", siteName: "门户主站" }],
      cmspage: {
        siteId: "",
        pageId: null,
        pageName: "",
        pageAliase: "",
        pageWebPath: "",
        pageParameter: null,
        pagePhysicalPath: "",
        dataUrl:null,
        pageType: "",
        pageTemplate: null,
        pageHtml: null,
        pageStatus: null,
        pageCreateTime: "",
        templateId: "",
      },
      rules: {
        pageName: [
          { required: true, message: "请输入页面名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        templateId: [
          { required: true, message: "请选择模板", trigger: "blur" },
        ],
        siteId: [
          { required: true, message: "请选择所属站点", trigger: "blur" },
        ],
        pageCreateTime: [
          {  required: true, message: "请选择创建时间", trigger: "blur" },
        ],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      // console.log(formName)
      console.log(this.cmspage);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          
          page_add(this.cmspage).then((res) => {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.$router.push('/cms/page/list')
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>